<template>
 
  <el-container class="container" >
      <!-- 头部区域 -->
      <el-header class="el-header">
          <div>
              <img src="../assets/huli-logo.png" alt="" class="img-header">
              <span class="spans">网约护理后台管理系统</span>
              
            </div>
          <el-button type="info" @click="logout" class="butt">退出</el-button>

        </el-header>
      <!-- 页面主体区 -->
      <el-container class="home-container" >
            <!-- 侧边栏 -->
            <el-aside width="200px" class="el-aside">
                <!-- 侧边栏菜单区域 -->
                <el-menu active-text-color="#302924" background-color="#428099" text-color="#fff" :router="true"
                :default-active="activePath">
                    <!-- 一级菜单区域 1 -->
                    <el-sub-menu index="1">
                        <!-- 一级菜单的模板区域 -->
                        <template #title>
                           <!-- 图标 -->
                           <el-icon><Avatar /></el-icon>
                           <!-- 文本 -->
                           <span>用户管理</span>
                        </template>

                        <!-- 二级菜单区域 -->
                        <el-menu-item index="/patient" @click="saveNavState('/patient')">
                            <template #title>
                               <!-- 图标 -->
                               <el-icon><Menu /></el-icon>
                               <!-- 文本 -->
                               <span>患者信息管理</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="/nurse" @click="saveNavState('/nurse')">
                            <template #title>
                               <!-- 图标 -->
                               <el-icon><Menu /></el-icon>
                               <!-- 文本 -->
                               <span>护士信息管理</span>
                            </template>
                        </el-menu-item>
                    </el-sub-menu>
            
                    <!-- 一级菜单区域 2 -->
                    <el-sub-menu index="2">
                        <!-- 一级菜单的模板区域 -->
                        <template #title>
                            <!-- 图标 -->
                            <el-icon><Goods-filled /></el-icon>
                            <!-- 文本 -->
                            <span>项目管理</span>
                        </template>

                        <!-- 二级菜单区域 -->
                        <el-menu-item index="/project">
                            <template #title>
                                <!-- 图标 -->
                                <el-icon><Menu /></el-icon>
                                <!-- 文本 -->
                                <span>项目信息管理</span>
                            </template>
                        </el-menu-item>
                        <!-- 二级菜单区域 -->
                        <!-- <el-menu-item index="/cate">
                            <template #title> -->
                                <!-- 图标 -->
                                <!-- <el-icon><Menu /></el-icon> -->
                                <!-- 文本 -->
                                <!-- <span>项目分类管理</span> -->
                            <!-- </template>
                        </el-menu-item> -->
                    </el-sub-menu>

                    <!-- 一级菜单区域 3-->
                    <el-sub-menu index="3">
                        <!-- 一级菜单的模板区域 -->
                        <template #title>
                            <!-- 图标 -->
                            <el-icon><List /></el-icon>
                            <!-- 文本 -->
                            <span>订单管理</span>
                        </template>

                        <!-- 二级菜单区域 -->
                        <el-menu-item index="/order">
                            <template #title>
                               <!-- 图标 -->
                               <el-icon><Menu /></el-icon>
                               <!-- 文本 -->
                               <span>订单信息管理</span>
                            </template>
                        </el-menu-item>
                    </el-sub-menu>

                    <!-- 一级菜单区域 4-->
                    <el-sub-menu index="4">
                        <!-- 一级菜单的模板区域 -->
                        <template #title>
                            <!-- 图标 -->
                            <el-icon><Tools /></el-icon>
                            <!-- 文本 -->
                            <span>权限管理</span>
                        </template>

                        <!-- 二级菜单区域 -->
                        <el-menu-item index="/rights">
                            <template #title>
                               <!-- 图标 -->
                               <el-icon><Menu /></el-icon>
                               <!-- 文本 -->
                               <span>权限列表</span>
                            </template>
                        </el-menu-item>
                        <!-- 二级菜单区域 -->
                        <el-menu-item index="/roles">
                            <template #title>
                               <!-- 图标 -->
                               <el-icon><Menu /></el-icon>
                               <!-- 文本 -->
                               <span>角色列表</span>
                            </template>
                        </el-menu-item>
                    </el-sub-menu>

                    <!-- 一级菜单区域 5-->
                    <el-sub-menu index="5">
                        <!-- 一级菜单的模板区域 -->
                        <template #title>
                           <!-- 图标 -->
                           <el-icon><Histogram /></el-icon> 
                           <!-- 文本 -->
                           <span>数据统计</span>
                        </template>
                    </el-sub-menu> 

                

                </el-menu>
            </el-aside>
        
            <!-- 右侧主体区 -->
            <el-main class="el-main">
                <!-- 路由占位符 -->
                <router-view></router-view>
                
            </el-main>
        </el-container>
    </el-container>
 
</template>

<script>
import  { Menu,Avatar,Histogram,GoodsFilled,List,Tools } from '@element-plus/icons-vue'

export default {
    name:'home',
    components:{
        Menu,
        Avatar,
        Histogram,
        GoodsFilled,
        List,
        Tools

    },
    
    data(){
        return{
        //被激活的的链接地址,给这个activePath重新赋值
        activePath:''
        }
    },

    created(){
        this.activePath=window.sessionStorage.getItem('activePath')
    },

    methods:{
        logout(){
            //清空token
            window.sessionStorage.clear()
            //跳转到登录页面
            this.$router.push('/login')
        },
        //保存激活链接的行为状态
        saveNavState(activePath){
            window.sessionStorage.setItem('activePath',activePath)
            this.activePath=activePath

        },
    },
    
    
    
}
</script>

<style lang="less" scoped>
// .home-container{
//     height: 100vh;
// }
.container{
    height: 100%;

}
.el-header{
    background-color:#428099 ;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color: white;
    >div{
        display: flex;
        align-items: center;
        span{
            margin-left: 15px;
        }
    }
    
}
.spans{
    font-size: 20px;
}


.el-aside{
    background-color:#428099 ;
    .el-menu{
        border-right: none;
    }
   
}
.el-main{
    background-color: #d1dce0;
}
.img-header{
    height: 58px;
    width: 60px;
}
</style>